import React, { useState } from 'react';
import cs from 'classnames';

import styles from './style/index.module.less';
import { Form, Grid, Input, Select } from '@arco-design/web-react';

import { EnumsRes } from '@/api/interface';
import { ReqViolationCreate } from '@/api/interface/violation';

const { Row, Col } = Grid;
const Option = Select.Option;

const handleInputChange = (event) => {
  const { value } = event.target;
  event.target.value = value.trim();
};

function dynamicFormat(input) {
  const inputArr = input
    .replace(/-/g, '')
    .replace(/[^0-9 ]+/, '')
    .split('');
  const split = [
    [0, 3],
    [3, 7],
    [7, 14],
    [14, 15],
  ];
  const result = [];
  for (let i = 0; i < split.length; i++) {
    const text = inputArr.slice(split[i][0], split[i][1]).join('');
    if (text) {
      result.push(inputArr.slice(split[i][0], split[i][1]).join(''));
    }
  }
  return result.join('-');
}

const handleInputChangeEid = (event) => {
  const { value } = event.target;
  event.target.value = dynamicFormat(value.trim());
};

const handleInputChangeUnifiedNumber = (event) => {
  const { value } = event.target;
  event.target.value = value.trim().replace(/[^0-9 ]+/, '');
};
export function personal(
  formData: ReqViolationCreate,
  rtl,
  t,
  lang: string,
  nationalityEnums: Array<EnumsRes>,
  sourceEnums: Array<EnumsRes>,
  complainantEnums: Array<EnumsRes>
) {
  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <div className={styles['block-title']}>{t['personal.personal']}</div>
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            label={t['personal.fullName']}
            field="fullName"
            rules={[{ required: true }]}
          >
            <Input
              allowClear
              maxLength={100}
              placeholder={t['personal.fullName.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.nationality']}
            field="nationality"
            rules={[{ required: true }]}
          >
            <Select
              showSearch
              allowClear
              placeholder={t['personal.nationality.placeholder']}
              filterOption={(inputValue, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(inputValue.toLowerCase()) >= 0
              }
            >
              {nationalityEnums.map((option, index) => (
                <Option key={index} value={option?.key}>
                  {option.value[lang === 'en-US' ? 'en' : 'ar']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.source']}
            field="source"
            rules={[{ required: true }]}
          >
            <Select
              showSearch
              allowClear
              placeholder={t['personal.source.placeholder']}
              filterOption={(inputValue, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(inputValue.toLowerCase()) >= 0
              }
            >
              {sourceEnums.map((option, index) => (
                <Option key={index} value={option?.key}>
                  {option.value[lang === 'en-US' ? 'en' : 'ar']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        {/* {formData.source === 'OTHER' && (
          <Col span={4}>
            <Form.Item
              label={t['personal.sourceOther']}
              field="sourceOther"
              rules={[{ required: true }]}
            >
              <Input
                maxLength={1000}
                allowClear
                placeholder={t['personal.sourceOther.placeholder']}
              />
            </Form.Item>
          </Col>
        )} */}

        <Col span={8}>
          <Form.Item
            label={t['personal.mobile']}
            field="mobile"
            validateTrigger={['onBlur']}
            rules={[
              {
                required: true,
              },
              {
                validator: (val, cb) => {
                  if (!/^05\d{8}$/.test(val)) {
                    cb(t['personal.mobile.message']);
                  }
                  if (val.length != 10) {
                    cb(t['personal.mobile.message1']);
                  }
                  cb();
                },
              },
            ]}
          >
            <Input
              allowClear
              maxLength={10}
              type="number"
              placeholder={t['personal.mobile.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.role']}
            field="complainantRole"
            rules={[{ required: true }]}
          >
            <Select allowClear placeholder={t['personal.role.placeholder']}>
              {complainantEnums.map((option, index) => (
                <Option key={index} value={option?.key}>
                  {option.value[lang === 'en-US' ? 'en' : 'ar']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.email']}
            field="email"
            validateTrigger={['onBlur']}
            rules={[
              {
                validator: (val, cb) => {
                  if (val) {
                    if (
                      /[\w]+(?:\.[\w]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(
                        val
                      )
                    ) {
                      cb();
                    } else {
                      cb(t['personal.email.message']);
                    }
                  }
                  cb();
                },
              },
            ]}
          >
            <Input
              maxLength={500}
              allowClear
              onInput={handleInputChange}
              placeholder={t['personal.email.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.eid']}
            field="eid"
            validateTrigger={['onBlur']}
            rules={[
              { required: true },
              {
                validator: (val, cb) => {
                  if (val) {
                    if (!/^\d{3}-\d{4}-\d{7}-\d/.test(val)) {
                      cb(t['personal.eid.message1']);
                    }
                  }
                  cb();
                },
              },
            ]}
          >
            <Input
              maxLength={18}
              allowClear
              onInput={handleInputChangeEid}
              placeholder={t['personal.eid.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['personal.UnifiedNumber']}
            field="unifiedNumber"
            validateTrigger={['onBlur']}
            rules={[
              {
                validator: (val, cb) => {
                  if (val) {
                    if (!/\d{8,10}$/.test(val)) {
                      cb(t['personal.UnifiedNumber.message']);
                    }
                  }
                  cb();
                },
              },
            ]}
          >
            <Input
              maxLength={10}
              allowClear
              onInput={handleInputChangeUnifiedNumber}
              placeholder={t['personal.UnifiedNumber.placeholder']}
            />
          </Form.Item>
        </Col>
      </Row>
    </div>
  );
}
